<template>
  <div class="common-barrage">
    <div class="common-barrage__inner">
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import Taro from "@tarojs/taro";
import { onMounted, provide, ref } from "vue";

defineOptions({
  name: "common-barrage",
});

const gap = ref(10);
const width = ref(0);

onMounted(() => {
  console.log("onMounted");
  const query = Taro.createSelectorQuery();
  console.log(query);
  query
    .selectAll(".common-barrage-item")
    .boundingClientRect((res) => {
      console.log(res, "node");
    })
    .exec();

  // console.log(list);
});

const addItem = () => {
  console.log("添加");
};

provide("addItem", addItem);
</script>

<style lang="less">
.common-barrage {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  box-sizing: border-box;
  overflow: hidden;
  --move-distance: 300%;
  &__inner {
    position: relative;
  }
}
</style>
